<template>
  <div>
    <MainContent title="ip限制配置">
    <div class="ipconfig_header">
        <el-radio-group v-model="tableForm.type">
            <el-radio-button v-for="(item,idx) in typeList" :key="idx" :label="item.id">{{item.name}}</el-radio-button>
        </el-radio-group>
        <div>
         <!-- TODO 加权限 -->
         <el-button type="primary" @click="showExportData = true" style="margin-left: 10px;">导出</el-button>
         <el-button type="primary" @click="dialogData.addIpConfigDialog = true" v-has="['140201']">添加限制</el-button>

        </div>
        
    </div>
    <LayoutTable
      ref="tabFormRef"
      url="/merchant/config/ip/getLimits"
      disable-auto-height
      :debounce="0"
      :showPager="false"
      :noPage="true"
      :param="tableForm"
    >
      <el-table-column prop="ipExpression" label="规则" min-width="120"></el-table-column>
      <el-table-column prop="type" label="类型" min-width="80">
        <template #default="scope">
          {{ typeData[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="80">
        <template #default="scope">
          {{ setStatus(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="takeEffectTime" label="生效时间" min-width="120">
        <template #default="scope">
          {{ dateFormat(scope.row.takeEffectTime) }}
        </template>
      </el-table-column>

      <el-table-column prop="expireTime" label="失效时间" min-width="120">
        <template #default="scope">
          {{ dateFormat(scope.row.expireTime) }}
        </template>
      </el-table-column>

      <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="150">
      </el-table-column>

      <el-table-column prop="createTime" label="操作" width="120" v-has="['140202','140203']">
        <template #default="scope">
          <el-button link type="primary" @click="toEditor(scope.row)" v-has="['140202']">编辑</el-button>
          <el-button link type="primary" @click="delElMessageBox(scope.row)" v-has="['140203']">删除</el-button>
        </template>
      </el-table-column>
    </LayoutTable>
    <addIpConfig
      :showDialog="dialogData.addIpConfigDialog"
      :ipConfigData="ipConfigData"
      @cancel="cancel"
      @confirm="confirm"
    ></addIpConfig>
    <exportData
      v-model:show-dialog="showExportData"
      :search-data="tableForm"
      title="ip限制配置"
      export-type="systemMerchantIpLimitExport"
    >
    </exportData>
  </MainContent>
  </div>
</template>
<script lang="ts">
export default {
  name: 'IpConfigList'
}
</script>
<script setup lang="ts">
import addIpConfig from "./components/addIpConfig.vue";
import { dateFormat } from "@/utils/filters";
import sysConfigApi from "@/api/sysConfigApi";
import exportData from "@/components/exportData/exportData.vue";
const tableForm = ref({
    type: null as any
});
const showExportData = ref(false)
const dialogData = reactive({
  addIpConfigDialog: false,
});
const ipConfigData = ref({id: null})
const tabFormRef = ref()
const typeData = ref({
    White: '白名单',
    Black: '黑名单',
})
const typeList = ref([
    {name: '全部', id: null},
    {name: '白名单', id: "White"},
    {name: '黑名单', id: "Black"},
])
const delElMessageBox = (row: any)=> {
    ElMessageBox.confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            delSubmit(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });
}
const setStatus = (row: any) => {
  let newDate = new Date().getTime()
  if(newDate < row.takeEffectTime) {
    return "未生效"
  } else if(newDate > row.takeEffectTime && newDate < row.expireTime) {
    return "生效中"
  } else if(newDate > row.expireTime){
    return "已失效"
  }
}
const delSubmit = async(row: any)=>{
    let rs: any = await sysConfigApi.delIpLimit({id: row.id})
    if(rs.code === 200) {
        ElMessage.success('删除成功')
        onSearch()
    }
}
const toEditor = (row:any)=> {
    console.log('[ row ]', row)
    ipConfigData.value = JSON.parse(JSON.stringify(row))
    dialogData.addIpConfigDialog = true
}
const confirm = () => {
  onSearch();
};
const cancel = (type: string | number) => {
    dialogData[type] = false
    ipConfigData.value = {id: null}
    console.log('[ cancel-ipConfigData.value ]', ipConfigData.value)

};
const onSearch = () => {
  tabFormRef.value.search()
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true
  }
)
</script>
<style lang="scss" scoped>
.ipconfig_header {
    margin-bottom: 10px;
    display: flex;
    .el-button {
        // margin-right: 10px;
    }
}

</style>
